<template>
  <div class="container">
    <div v-for="item in data.list" :key="item.id" class="comment">
      <div class="top">
      <el-avatar :size="40" :src="item.comment_user.avatar"></el-avatar>
      <div>{{item.comment_user.nickname}}</div>
    </div>
    <p>{{item.content || '笑笑不说话'}}</p>
    <div class="center">
      <div
        class="item"
        @click="$router.push({name: 'NewsDetails', params: { article_id:`${item.comment_article.id}`}})"
      >
        <div class="left">
          <b>{{ item.comment_article.user.nickname }} </b>
          <span>| </span> <span>{{ item.comment_article.createdAt | time }}</span>
          <span>| </span>
          <span>{{ item.comment_article.category.name }}</span>
          <h2>{{ item.comment_article.title }}</h2>
          <p class="item-content" v-text="item.comment_article.content"></p>
          <ul>
            <li>
              <a
                ><i class="el-icon-view"></i>&nbsp;{{
                  item.comment_article.read_count
                }}</a
              >
            </li>
            <li>
              <a><i class="el-icon-thumb"></i>{{ item.comment_article.like_count }}</a>
            </li>
            <li>
              <a
                ><i class="el-icon-chat-round"></i
                >{{ item.comment_article.comment_count }}</a
              >
            </li>
            <li>
              <a><i class="el-icon-more"></i></a>
            </li>
          </ul>
        </div>
        <div class="right">
          <el-image :src="item.comment_article.cover_img" fit="contain"></el-image>
        </div>
      </div>
    </div>
    <div class="bottom">
      <div>
        <span>{{item.updatedAt | time}}</span>
      </div>
      <div>
        <a><i class="el-icon-thumb"> {{item.like_count}}</i></a>
        <a><i class="el-icon-chat-round"></i> {{item.comment_count}}</a>
        <a><i class="el-icon-close"></i></a>
      </div>
    </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "commentItem",
  props: {
    data: Object,
    required: true,
    default: function () {
      return {};
    },
  },
  data() {
    return {};
  },
};
</script>
<style lang="scss" scoped>
.comment{
  // background: #ccc;
  // margin-top: 35px;
  padding: 20px 0;
  border-bottom:1px solid rgb(241, 241, 241);
}
.top {
  display: flex;
  div {
    margin-left: 15px;
    font-size: 16px;
    line-height: 40px;
    font-weight: 500;
    // background: #6e5d5d;
  }
}
.bottom {
  margin-top: 15px;
  display: flex;
  justify-content: space-between;
  font-size: 15px;
  div:nth-child(2) {
    a {
      margin-left: 15px;
    }
    // font-weight: 500;
  }
}
.item:hover {
  cursor: pointer;
  background: #fafafa;
}
.item {
  display: flex;
  justify-content: space-between;
  padding: 15px 0 15px 0;
  // border-bottom: 1px solid #dee0e2;
  // overflow: hidden; //隐藏文字
   background: #fcfafa;
   border-radius: 8px;
   padding: 15px;
  .left {
    width: 620px;
    // height: 100px;
    //  background: #9b5b5b;
    b {
      color: #66696d;
      font-size: 13px;
    }
    span {
      margin: 0px 1px;
    }
    span,
    p {
      color: #86909c;
      font-size: 13px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden; //隐藏文字
    }
    i {
      color: rgb(160, 150, 150);
      margin-right: 2px;
    }
    a {
      color: #4e5969;
    }
    h2 {
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden; //隐藏文字
      font-size: 16px;
      color: #1d2129;
    }
    ul > li {
      list-style-type: none;
      // width: 35px;
      float: left;
      margin-right: 15px;
      font-size: 14px;
    }
  }
  .right {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    .el-image {
      border-radius: 4px;
      width: 150px;
      overflow: hidden;
    }
  }
}
</style>
